<template>
  <el-dialog  title="关联角色" :visible.sync="showDialog" width="45%">
   <el-checkbox-group v-model="checkRole">
    <!-- 只有label，label的数据会给v-model -->
    <el-checkbox v-for="item in allRoleList" :key="item.id" :label="item.id">
      {{item.name}}
    </el-checkbox>
   </el-checkbox-group>
   
    <span slot="footer">
      <el-button size="small"  @click="showDialog = false">Cancel</el-button>
      <el-button  size="small" type="primary" @click="btnOk">OK</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {getEnableRoleApi} from '@/api/role'
import { assignRoleApi } from '@/api/employee'
  export default {
    data() {
      return {
        showDialog: false,
        allRoleList:[], // 所有角色
        checkRole:[], // 选中角色
        userId:''  // 用户ID
      }
    },
    created () {
      this.getAllRole()
    },
    methods: {
      // 获取所有角色
      async getAllRole(){
        let res = await getEnableRoleApi()
        this.allRoleList = res
      },
      // 员工关联角色提交
      async btnOk() {
        await assignRoleApi({
          id:this.userId,
          roleIds:this.checkRole
        })
        this.$message.success('操作成功')
        this.showDialog = false
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>